<style lang="scss" scoped>
.phone-cont {
    width:100%;
    background:rgba(255,255,255,1);
    padding-top:60px;
}

.weixinQrcode {
    display: flex;
    align-items: center;
    flex-direction: column;
    padding:50px 0;

    > span {
        width:380px;
        height:39px;
        background:rgba(229,247,255,1);
        border-radius:4px;
        border:1px solid rgba(142,212,255,1);
        display: flex;
        align-items: center;
        color:#666A80;
        margin-bottom:20px;

        > img {
            margin:0 6px 0 10px;
        }
    }

    .qrcode {
        width:380px;
        height:522px;
        border-radius:4px;
        border:2px solid rgba(225,231,235,1);
        display: flex;
        align-items: center;
        flex-direction: column;

        > .qrcode-cont {
            margin:55px 0 36px;
            width:288px;
            height:310px;
        }

        p {
            font-size:14px;
            color:rgba(114,117,121,1);
            line-height:20px;
        }

        .qrTitle {
            color:rgba(29,44,47,1);
            line-height:28px;
            font-size:20px;
            margin-bottom:8px;
        }
    }
}


.impowerBox .title {
    display: none;
}

</style>

<template>
    <section><!--
        <crumbs :path="path" ></crumbs> -->
        <section class="phone-cont">
            <!-- 微信二维码 -->
            <div class="weixinQrcode">
                <span><img src="http://jhsy-img.caizhu.com/FgEYebYNYNIIDbE1wB1J5Hwp6cH3" alt="">请新管理员进行扫描并绑定</span>
                <div class="qrcode">
                    <div class="qrcode-cont" id="qrcode-cont"></div>
                    <p class="qrTitle">微信扫码更换绑定</p>
                    <p>更换微信号后将无法继续登录</p>
                </div>
            </div>
        </section>
    </section>
</template>
<script>
    import com from 'js/common'
    import qs from 'qs'

    export default {
        data() {
            return {
                phoneform:{},
                path:[
                    {
                        'name':'设置',
                        'path':'/university/basic-settings'
                    },
                    {
                        'name':'企业账户管理',
                        'path':'/university/basic-settings?step=3'
                    },
                    {
                        'name':'微信更换',
                        'path':''
                    }
                ],
                AppID:"",
                State:"",
                code:''
            }
        },
        components:{
            crumbs
        },
        methods:{
            changeWechat(cbCode) {

                if(cbCode){
                    // this.wxLogin()
                    axios.post('com/member/changeWechat', qs.stringify({
                        code: cbCode,
                        state: this.State
                    })).then((res) =>{
                        let d = res.data;
                        if(d.flag == 1) {
                            this.$router.push({'path': '/university/basic-settings', query:{'step':3}})
                        } else {
                            this.$message.error(d.msg)
                            this.AppID = d.data.AppID
                            this.State = d.data.State
                            this.wxLogin()
                        }
                    })
                }
            },

            wxLogin(opts){

                let wxLoginJs = location.protocol +'//res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js'

                com.createJs(wxLoginJs, this.wxLoginJsFn)
            },

            wxLoginJsFn() {
                let obj = new WxLogin({
                    id:"qrcode-cont",
                    appid: this.AppID,
                    scope: "snsapi_login",
                    redirect_uri: encodeURIComponent(location.protocol+'//'+location.host+location.pathname),
                    state: this.State,
                    style: "black",
                    href: "https://api.jinghao.com/getImages/css/wipe-off.css"
                })
            }
        },
        mounted() {

            if(this.$route.query.AppID && this.$route.query.State) {
                this.AppID = this.$route.query.AppID
                this.State = this.$route.query.State
                this.wxLogin()
            }

            if(this.$route.query.code) {
                this.State = this.$route.query.state
                this.code = this.$route.query.code
                this.changeWechat(this.$route.query.code)
            }

            this.$store.commit('setPath', this.path)

        }
    }
</script>

